<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:43:10
-->
<template>
  <!-- 创建一个图标容器 容纳图标 -->
  <div ref="root" style="height:150px">

  </div>
</template>
<script>
  import {
    Bullet
  } from '@antv/g2plot';
  import {
    ref,
    onMounted
  } from 'vue';
  export default {
    //vue3新特性 
    setup() {
      //暂时访问不到根节点root
      let root = ref(null);
      let bullet = null;
      //创建一个折线图实例对象
      let initCharts = () => {
        //只需要给line进行赋值
        bullet = new Bullet(root.value, {
          data: [{
              title: '重庆',
              ranges: [30, 90, 120],
              measures: [65],
              target: 80,
            },
            {
              title: '杭州',
              ranges: [30, 90, 120],
              measures: [50],
              target: 100,
            },
            {
              title: '广州',
              ranges: [30, 90, 120],
              measures: [40],
              target: 85,
            },
            {
              title: '深圳',
              ranges: [30, 90, 120],
              measures: [50],
              target: 100,
            },
          ],
          measureField: 'measures',
          rangeField: 'ranges',
          targetField: 'target',
          xField: 'title',
          color: {
            range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
            measure: '#5B8FF9',
            target: '#39a3f4',
          },
          label: {
            measure: {
              position: 'middle',
              style: {
                fill: '#fff',
              },
            },
          },
          xAxis: {
            line: null,
          },
          yAxis: false,
          // 自定义 legend
          legend: {
            custom: true,
            position: 'bottom',
            items: [{
                value: '差',
                name: '差',
                marker: {
                  symbol: 'square',
                  style: {
                    fill: '#FFbcb8',
                    r: 5
                  }
                },
              },
              {
                value: '良',
                name: '良',
                marker: {
                  symbol: 'square',
                  style: {
                    fill: '#FFe0b0',
                    r: 5
                  }
                },
              },
              {
                value: '优',
                name: '优',
                marker: {
                  symbol: 'square',
                  style: {
                    fill: '#bfeec8',
                    r: 5
                  }
                },
              },
              {
                value: '实际值',
                name: '实际值',
                marker: {
                  symbol: 'square',
                  style: {
                    fill: '#5B8FF9',
                    r: 5
                  }
                },
              },
              {
                value: '目标值',
                name: '目标值',
                marker: {
                  symbol: 'line',
                  style: {
                    stroke: '#39a3f4',
                    r: 5
                  }
                },
              },
            ],
          },
          tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        });
        bullet.render();
      }
      onMounted(initCharts);
      return {
        root
      }
    }
  }
</script>